﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js" use="elem"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <p>
        elem.js是jquery扩展，方法包括：等待按钮、计时按钮、进度条、容器高度最大化、全屏
    </p>

    <h3>1、等待按钮</h3>
    <a class="rayui-btn btn-primary" id="loadbtn0">等待按钮</a>
    <div class="card">
        <pre class="word-wrap">
使用方法：
var ins = $("selector").loadingBtn(options);
1、options参数为layer弹窗中loading的参数，还包括一下属性：
    right：是否在最右边，可选true|false，默认false
    disabledClass：是否添加禁用样式，可选true|false，默认true

2、ins返回对象包含两个方法：
        a）start(waittime)：开始等待，waittime为等待时间，默认30秒，等待时间过后无论是否触发stop都会自动停止
        b）stop()：停止等待
<p class="font-color-red">
注意：
页面上此按钮一定要先调用loadingBtn方法，再绑定其他方法，否则无法阻断方法调用
</p>
</pre>
    </div>



    <h3>2、计时按钮</h3>
    <a class="rayui-btn btn-primary" id="timerbtn1">倒计时按钮到0</a>
    <a class="rayui-btn btn-success" id="timerbtn2">增计时到10</a>
    <div class="card">
        <pre class="word-wrap">
使用方法：
var ins = $("selector").timerBtn(options);
1、options参数：
    min: 最小值，默认0,
    max: 最大值，默认10,
    down: 是否递减，可选true|false。默认true递减；false递增
    step: 步幅，每次增减数值，默认1。可为小数，为小数时按照本参数保留小数，和max、min无关
    interval: 执行间隔，单位毫秒，默认1000ms=1s,
    unit: 单位，默认's',
    disabledClass: 是否添加禁用样式，可选true|false，默认true

2、ins返回对象包含两个方法：
        a）start()：开始计时
        b）stop()：停止计时

</pre>
    </div>


    <h3>3、进度条</h3>
    <div id="progress1"></div>
    <div class="rayui-pgcolor-red" id="progress2"></div>
    <div class="rayui-pgcolor-green" id="progress3"></div>
    <div class="rayui-pgcolor-blue progress-striped" id="progress4"></div>
    <div class="rayui-pgcolor-orange progress-striped" id="progress5"></div>
    <div class="progress-striped" id="progress100"></div>
    <button class="rayui-btn btn-primary" id="loading">模拟加载</button>
    <a href="progress.html">具体使用方法前往页面progress.html</a>



    <h3>4、全屏</h3>
    <div class="card">
        <pre class="word-wrap">
使用方法：
$("selector").fullHeight(heightOpt);
1、heightOpt有三种格式：
    full-数值: 窗口最大值 - 设定数值
    top-数值: 窗口最大值 - 容器offset.top - 设定数值
    sel-jq选择器-数值：窗口最大值 - jq选择器所有的高度 - 设定数值，jq选择器只能以#和.开始，即只能是class或则id，不支持混用

</pre>
    </div>


    <h3>5、窗口最大化</h3>
    <a class="rayui-btn btn-success" id="fullScreen">全屏</a>
    <div class="card">
        <pre class="word-wrap">
使用方法：
$.fullScreen();
这个没啥好说的，直接用就行啦
</pre>
    </div>


    <script>
        rayui.ready(function () {
            //等待按钮
            var btnloadIns = $("#loadbtn0").loadingBtn();
            $("#loadbtn0").click(function () {
                $("#loadbtn0").text("模拟执行中，3秒后关闭");
                btnloadIns.start();
                setTimeout(function () {
                    btnloadIns.stop();
                    $("#loadbtn0").text("等待按钮");
                }, 3000);
            });
            //计时按钮
            function regTimerBtn(id, options) {
                var $obj = $('#' + id);
                var lbtn = $obj.timerBtn(options);
                $obj.click(function () {
                    lbtn.start();
                });
            }
            regTimerBtn("timerbtn1");
            regTimerBtn("timerbtn2", { down: false, step: 0.2, min: 8, disabledClass: false });

            //进度条
            $("#progress1").progress(20);
            $("#progress2").progress(40);
            $("#progress3").progress(60);
            $("#progress4").progress(80);
            $("#progress5").progress(90);
            var proIns51 = $("#progress100").progress({
                progress: 0,
                height: 16,
                label: 'middle',
                color: "#d9534f",
                processColors: [{ 20: "#d9534f" }, { 50: "#cc6f10" }, { 80: "#2e8b57" }]
            });
            var progress = 0;
            function callprogress() {
                progress += rayui.random(5, 15);
                if (progress > 100) {
                    progress = 100;
                    $("#loading").prop("disabled", false);
                }
                proIns51.setProgress(progress);
                if (progress !== 100)
                    setTimeout(callprogress, 1000);
            }
            $("#loading").click(function () {
                progress = 0;
                callprogress();
                $(this).prop("disabled", true);
            });

            //全屏
            $("#fullScreen").click(function () {
                $.fullScreen();
            });
        });

    </script>


</body>
</html>